<template>
	<view class="content">
		<headerView />
		<view class="absolute">
			<view class="absolute-conter">
				<el-breadcrumb separator="/">
				    <el-breadcrumb-item :to="{ path: '/' }">home</el-breadcrumb-item>
				    <el-breadcrumb-item :to="{ path: '/pages/products/index' }">products </el-breadcrumb-item>
				    <el-breadcrumb-item>{{ formData.title }}</el-breadcrumb-item>
				</el-breadcrumb>
			</view>
		</view>
		<view class="content-conter">
			<el-row class="elRow" justify="center" gutter="20">
				<el-col :xs="24" :sm="10" :md="10" :lg="10" class="elCol">
					<!-- 移动端 -->
					<swiper class="swiper hidden-sm-and-up" circular :indicator-dots="true">
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<view class="swiper-item uni-bg-red">
								<image style="width: 100%" :src="item.img" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>

					<!-- PC端 -->
					<view class="bannerView hidden-sm-and-down">
						<view class="bannerImg">
							<image class="img" :src="bannerList[bannerIndex]?.img" mode="widthFix"></image>
						</view>
						<view class="bannerList">
							<view class="bannerItem" v-for="(item, index) in bannerList" :key="index" @click="bannerIndex = index" :class="{ action: bannerIndex === index }">
								<image class="img" :src="item.img" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</el-col>

				<el-col :xs="24" :sm="14" :md="14" :lg="14" class="elCol">
					<view class="product-info">
						<view class="product-info-type">{{ formData.type }}</view>
						<view class="product-info-title">{{ formData.title }}</view>
						<template v-for="(item, index) in formData.selectSize" :key="index">
							<view class="product-info-price" v-if="item.size == selectData.size">
								<view class="price">${{ item.price }}</view>
								<view class="originalPrice" v-if="item.originalPrice">${{ item.originalPrice }}</view>
							</view>
						</template>
						<view class="promo">限时促销：{{ formData.promoDataStart }} - {{ formData.promoDataEnd }}</view>

						<el-divider />

						<view class="product-info-desc">{{ formData.desc }}</view>

						<view class="product-info-parameter">
							<view class="item">
								<view class="label"><u-icon custom-prefix="custom-icon custom-icon-queding"></u-icon></view>
								<view class="value">
									<view class="name">材质：</view>
									<view class="span">{{ formData.material }}</view>
								</view>
							</view>

							<view class="item">
								<view class="label"><u-icon custom-prefix="custom-icon custom-icon-queding"></u-icon></view>
								<view class="value">
									<view class="name">工艺：</view>
									<view class="span">{{ formData.craft }}</view>
								</view>
							</view>

							<view class="item">
								<view class="label"><u-icon custom-prefix="custom-icon custom-icon-queding"></u-icon></view>
								<view class="value">
									<view class="name">尺寸：</view>
									<view class="span">{{ formData.size }}</view>
								</view>
							</view>

							<view class="item">
								<view class="label"><u-icon custom-prefix="custom-icon custom-icon-queding"></u-icon></view>
								<view class="value">
									<view class="name">产地：</view>
									<view class="span">{{ formData.origin }}</view>
								</view>
							</view>
						</view>

						<el-divider />

						<view class="colorView">
							<view class="label">选择颜色</view>
							<view class="list">
								<view class="item" :class="{'action':item == selectData.color}" 
									v-for="(item, index) in formData.color" :key="index" 
									:style="{ backgroundColor: item }" @click="selectColor(item)"></view>
							</view>
						</view>

						<view class="selseSize">
							<view class="label">选择尺寸</view>
							<view class="list">
								<view class="item" v-for="(item, index) in formData.selectSize" :key="index" @click="selectSize(item)"
									:class="{'action':item.size == selectData.size}">
									{{ item.size }}
								</view>
							</view>
						</view>

						<view class="butView">
							<view class="but">立即咨询</view>
							<u-icon customPrefix="custom-icon custom-icon-whatsapp" size="26px"></u-icon>
							<u-icon customPrefix="custom-icon custom-icon-ins" size="26px"></u-icon>
							<u-icon customPrefix="custom-icon custom-icon-facebook-messenger" size="26px"></u-icon>
							<u-icon customPrefix="custom-icon custom-icon-a-tuite2" size="22px"></u-icon>
						</view>

						<view class="product-info-parameter">
							<view class="item" v-for="(item, index) in undertake" :key="index">
								<view class="label action">
									<u-icon :custom-prefix="item.icon"></u-icon>
								</view>
								<view class="value">
									<view class="name">{{ item.title }}</view>
									<view class="span">{{ item.value }}</view>
								</view>
							</view>
						</view>
					</view>
				</el-col>
			</el-row>
			
			<view class="detail">
				<view class="detail-title">产品详情</view>
				<u-parse :html="formData.detail"></u-parse>
			</view>
		</view>
		<footerView />
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import headerView from '@/components/header/index.vue'; //导航
import footerView from '@/components/footer/index.vue'; //底部导航
import color from '../../uni_modules/vk-uview-ui/libs/function/color';

const bannerList = ref([
	{ img: 'https://picsum.photos/id/175/300/300', title: '' },
	{ img: 'https://picsum.photos/id/116/300/300', title: '' },
	{ img: 'https://picsum.photos/id/129/300/300', title: '' },
	{ img: 'https://picsum.photos/id/146/300/300', title: '' }
]);

const formData = ref({
	type: '北欧风格',
	title: '北欧几何纹理地毯',
	price: 12800,
	originalPrice: 15800,
	promoDataStart: '2025-08-12',
	promoDataEnd: '2023-12-12',
	desc: '这款北欧几何纹理地毯将现代简约设计与传统工艺完美结合，采用100%纯新羊毛手工编织而成。独特的几何图案为任何空间增添现代艺术感，同时保持温暖舒适的触感。耐磨耐用，适合各种家居环境。',
	material: '100%纯新羊毛', //材质
	craft: '机织工艺', //工艺
	size: '多种尺寸可选', //尺寸
	origin: '中国上海', //产地
	color: ['#F5F5F0', '#E8E4D9', '#D1C4A6', '#A6A6A6'],
	selectSize: [
		{
			size:'120×170cm',
			price: 12800,
			originalPrice: 15800,
		},{
			size:'160×230cm',
			price: 13800,
			originalPrice: 16800,
		},{
			size:'180×260cm',
			price: 14800,
			originalPrice: 17800,
		},{
			size:'200×300cm',
			price: 15800,
			originalPrice: 18800,
		},{
			size:'定制尺寸',
			price: 99999
		}
	],
	detail: `<p>露从今夜白，月是故乡明</p> <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`
});

const undertake = ref([
	{ icon: 'custom-icon custom-icon-banjiapeisong', title: '全球配送', value: '7-15个工作日送达' },
	{ icon: 'custom-icon custom-icon-zixun', title: '立即咨询', value: '7×16小时在线' },
	{ icon: 'custom-icon custom-icon-baozhang-copy', title: '品质保证', value: '5年质量保证' },
	{ icon: 'custom-icon custom-icon-xunhuan', title: '30天退换', value: '产品完好可退换' }
]);

const selectData = ref({
	color: '#F5F5F0',
	size: '120×170cm',
	price: 12800,
	originalPrice: 15800,
});

// 尺寸选择
const selectSize = (item) => {
	selectData.value.size = item.size;
	selectData.value.price = item.price;
	selectData.value.originalPrice = item.originalPrice;
}

// 颜色选择
const selectColor = (item) => {
	console.log(item)
	selectData.value.color = item;
}


const bannerIndex = ref(0);
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	background-color: rgb(249,250,251);

	.absolute {
		width: 100%;
		height: auto;
		background-color: rgb(249, 250, 251);
		padding: 20px 0;
		margin-bottom: 10px;

		&-conter {
			max-width: 1200px;
			width: 100%;
			height: auto;
			margin: 0 auto;
			font-size: 16px;
			display: flex;
			gap: 3px;
			margin: 0 auto;
			color: rgb(75, 85, 99);
			padding: 0 20px;
			box-sizing: border-box;

			text {
				color: rgb(26, 54, 93);
				cursor: pointer;
			}
		}
	}

	&-conter {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto 40px;
		box-sizing: border-box;

		.elRow {
			width: 100%;
			margin: 0 auto 50px !important;
			background-color: #fff;
			padding: 20px 10px;
			box-sizing: border-box;

			.elCol {
				margin-bottom: 20px;

				.swiper {
					width: 100%;
					height: 400rpx;
					border-radius: 10px;
					overflow: hidden;

					.swiper-item {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 32px;
						color: #fff;
					}
				}

				.bannerView {
					width: 100%;
					height: auto;

					.bannerImg {
						width: 100%;
						height: auto;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10px;
						overflow: hidden;
						margin-bottom: 10px;

						.img {
							width: 100%;
							height: auto;
						}
					}

					.bannerList {
						width: 100%;
						height: 110px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 10px;
						overflow-x: scroll;
						-webkit-overflow-scrolling: touch;
						-ms-overflow-style: none; /* IE and Edge */
						scrollbar-width: none; /* Firefox */

						&::-webkit-scrollbar {
							display: none;
						}

						.bannerItem {
							width: 110px;
							height: 110px;
							box-sizing: border-box;
							border: 1px solid #fff;
							border-radius: 10px;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-shrink: 0;
							cursor: pointer;

							.img {
								width: 100%;
								height: auto;
							}

							&.action {
								border-color: #333;
							}
						}
					}
				}

				.product-info {
					width: 100%;
					height: auto;

					&-type {
						width: 100%;
						height: auto;
						color: rgb(183, 146, 45);
						line-height: 1.5;
						margin-bottom: 5px;
						font-weight: 500;
					}

					&-title {
						width: 100%;
						height: auto;
						color: rgb(26, 54, 93);
						font-size: 34px;
						line-height: 1.7;
						font-weight: 700;
						margin-bottom: 15px;
					}

					&-price {
						width: 100%;
						height: auto;
						display: flex;
						line-height: 30px;
						color: rgb(26, 54, 93);
						font-size: 24px;
						font-weight: 700;
						align-items: baseline;

						.originalPrice {
							font-size: 13px;
							font-weight: 400;
							margin-left: 6px;
							color: rgb(156, 163, 175);
							text-decoration-line: line-through;
						}
					}

					.promo {
						width: 100%;
						height: auto;
						font-size: 15px;
						line-height: 22px;
						color: rgb(75 85 99 / 1);
					}

					&-desc {
						width: 100%;
						height: auto;
						font-size: 15px;
						line-height: 1.6;
						color: rgb(75 85 99 / 1);
						margin-bottom: 20px;
					}

					&-parameter {
						width: 100%;
						height: auto;
						display: flex;
						flex-wrap: wrap;
						gap: 10px;

						.item {
							width: calc(50% - 12px);
							height: auto;
							display: flex;
							gap: 3px;

							.label {
								width: 20px;
								height: auto;
								font-size: 16px;
								line-height: 22px;
								color: rgb(183, 146, 45);
								
								&.action{
									color: rgb(26 54 93 / 1);
								}
							}

							.value {
								flex: 1;
								width: auto;
								height: auto;
								font-size: 15px;
								line-height: 22px;
								color: rgb(26 54 93 / 1);
								font-weight: 500;

								.span {
									color: rgb(75 85 99 / 1);
									font-size: 13px;
									font-weight: 400;
								}
							}
						}
					}

					.colorView {
						width: 100%;
						height: auto;

						.label {
							width: 100%;
							height: auto;
							font-size: 15px;
							line-height: 22px;
							color: rgb(26 54 93 / 1);
							margin-bottom: 8px;
							font-weight: 500;
						}

						.list {
							width: 100%;
							height: auto;
							display: flex;
							gap: 8px;
							margin-bottom: 20px;
							
							.item {
								width: 30px;
								height: 30px;
								border-radius: 100%;
								border: 1px solid #fff;
								cursor: pointer;
								
								&.action {
									border-color: rgb(26 54 93 / 1);
								}
							}
						}
					}

					.selseSize {
						width: 100%;
						height: auto;
						margin-bottom: 30px;

						.label {
							width: 100%;
							height: auto;
							font-size: 15px;
							line-height: 22px;
							color: rgb(26 54 93 / 1);
							margin-bottom: 8px;
							font-weight: 500;
						}

						.list {
							width: 100%;
							height: auto;
							display: flex;
							flex-wrap: wrap;
							gap: 8px;
							margin-bottom: 20px;

							.item {
								width: auto;
								height: 40px;
								border-radius: 10px;
								border: 1px solid rgb(156 163 175 / 1);
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 15px;
								line-height: 22px;
								color: rgb(26 54 93 / 1);
								padding: 0 10px;
								cursor: pointer;
								
								&.action {
									border-color: rgb(26 54 93 / 1);
									background-color: rgb(26 54 93 / 1);
									color: #fff;
								}
							}
						}
					}

					.butView {
						width: 100%;
						height: 50px;
						display: flex;
						align-items: baseline;
						gap: 10px;
						margin-bottom: 20px;

						.but {
							width: auto;
							height: 50px;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							padding: 0 40px;
							border-radius: 100px;
							border: 1px solid rgb(156 163 175 / 1);
							font-size: 17px;
							line-height: 22px;
							color: #fff;
							cursor: pointer;
							background-color: rgb(26 54 93 / 1);
							
							&:hover{
								background-color: rgb(26 54 93 / 0.8);
							}
						}
						
						.u-icon{
							height: 26px;
							color: rgb(26 54 93 / 1);
							position: relative;
							top: 10px;
							cursor: pointer;
							
							&:hover{
								transform: scale(1.2);
							}
						}
					}
				}
			}
		}
		
		.detail{
			width: 100%;
			height: auto;
			padding: 20px;
			background-color: #fff;
			border-radius: 10px;
			overflow: hidden;
			box-sizing: border-box;
			
			&-title{
				width: 100%;
				height: auto;
				font-size: 22px;
				line-height: 1.5;
				color: rgb(26 54 93 / 1);
				font-weight: 700;
				margin-bottom: 20px;
			}
		}
	}
}
</style>
